<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- No doctype (or comment/PI before doctype) puts IE6 in back compat mode -->

<html>
<head>
<title>Box Sizing Behavior Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

body, p, td, table {
	font-family:	Verdana, Helvetica, Arial, Sans-Serif;
	font-size:		8pt;
	margin:			10px;
}

button {
	padding:			2px 5px;
	border-width:		2px;
	width:				200px;
	margin:				2px;
	background-color:	rgb(234,242,255);
	border:				1px solid rgb(0,66,174);
	font-family:		Verdana, Helvetica, Arial, Sans-Serif;
	font-size:			8pt;
}

input {
	background:		white;
	color:			black;
	border:			1px solid rgb(0,66,174);
	font-family:	Verdana, Helvetica, Arial, Sans-Serif;
	font-size:		8pt;
}

table {
	margin-bottom:	-10px;
}

.test-area {
	padding:	10px;
	background:	url("/static/content/plugins/eyui/plugins/bootstrap/fix/boxsizing/images/grid.png") 10px 10px;
}

.border-box {
	-moz-box-sizing:	border-box;
	box-sizing:			border-box;
}

.content-box {
	-moz-box-sizing:	content-box;
	box-sizing:			content-box;
}

.test {
	behavior:		url("/static/content/plugins/eyui/plugins/bootstrap/fix/boxsizing.htc");
	width:			100px;
	background:		rgb(234,242,255);
	border-color:	rgb(0,66,174);
}

.test.width-110 {
	width:		110px;
	color:		red;
}

.border-10 {
	border-width:	10px !important;
}

</style>

<script type="text/javascript">
//<![CDATA[

var NUMBER_OF_DIVS = 9

function setStyle() {
	var prop = document.getElementById("prop-name").value;
	var v = document.getElementById("prop-value").value;
	setStyleValue(prop, v);
}

function setStyleValue(sProp, sValue) {
	for (var i = 1; i <= NUMBER_OF_DIVS; i++)
		document.getElementById("d-" + i).style[sProp] = sValue;
}

function addClassNames(cn) {
	for (var i = 1; i <= NUMBER_OF_DIVS; i++)
		addClassName(document.getElementById("d-" + i), cn);
}

function removeClassNames(cn) {
	for (var i = 1; i <= NUMBER_OF_DIVS; i++)
		removeClassName(document.getElementById("d-" + i), cn);
}

function alertStyle() {
	var prop = document.getElementById("prop-name").value;
	var s = [];
	for (var i = 1; i <= NUMBER_OF_DIVS; i++)
		s[i - 1] = document.getElementById("d-" + i).style[prop];
	alert(s.join("\n"));
}

function alertOffsetWidth() {
	var s = [];
	for (var i = 1; i <= NUMBER_OF_DIVS; i++)
		s[i - 1] = document.getElementById("d-" + i).offsetWidth;
	alert(s.join("\n"));
}

function addClassName(el, sClassName) {
	var s = el.className;
	var p = s.split(" ");
	var l = p.length;
	for (var i = 0; i < l; i++) {
		if (p[i] == sClassName)
			return;
	}
	p[p.length] = sClassName;
	el.className = p.join(" ");
			
}

function removeClassName(el, sClassName) {
	var s = el.className;
	var p = s.split(" ");
	var np = [];
	var l = p.length;
	var j = 0;
	for (var i = 0; i < l; i++) {
		if (p[i] != sClassName)
			np[j++] = p[i];
	}
	el.className = np.join(" ");
}

//]]>
</script>
</head>
<body>

<script type="text/javascript">
//<![CDATA[
var msie = /msie/gi.test(navigator.userAgent);
var ieBox = msie && document.compatMode != "CSS1Compat";

document.write("<p>This page is using the <strong>" +
	(ieBox ? "border-box" : "content-box") +
	"</strong> algorithm in your " + 
	"browser to calculate the size of elements</p>");
	
//]]>
</script>

<div class="test-area" id="testArea">
	<div class="test content-box" id="d-1" style="">Content box</div>
	<div class="test content-box" id="d-2" style="border: 5px solid;">Content box</div>
	<div class="test content-box" id="d-3" style="border: 5px solid; padding: 5px;">Content box</div>
	<div class="test border-box" id="d-4" style="">Border box</div>
	<div class="test border-box" id="d-5" style="border: 5px solid;">Border box</div>
	<div class="test border-box" id="d-6" style="border: 5px solid; padding: 5px;">Border box</div>
	<div class="test" id="d-7" style="">Default box</div>
	<div class="test" id="d-8" style="border: 5px solid;">Default box</div>
	<div class="test" id="d-9" style="border: 5px solid; padding: 5px;">Default box</div>
</div>

<table>
	<thead>
		<tr>
			<td>Property Name</td>
			<td>Value</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" id="prop-name" value="width" /></td>
			<td><input type="text" id="prop-value" value="150px" />
			(Clear the value input to remove the inline style value.)</td>
		</tr>
	</tbody>
</table>

<p>
<button onclick="setStyle()">Update Style</button>
<button onclick="alertStyle()">Alert Style</button>
<button onclick="alertOffsetWidth()">Alert offsetWidth</button>
</p>

<p>
<button onclick="addClassNames('width-110')">Add "width-110" className</button>
<button onclick="removeClassNames('width-110')">Remove "width-110" className</button>
<br />
<button onclick="addClassNames('border-10')">Add "border-10" className</button>
<button onclick="removeClassNames('border-10')">Remove "border-10" className</button>
<br />
<button onclick="setStyleValue('boxSizing', 'border-box');setStyleValue('MozBoxSizing', 'border-box');">Set box-sizing to border-box</button>
<button onclick="setStyleValue('boxSizing', 'content-box'); setStyleValue('MozBoxSizing', 'content-box');">Set box-sizing to content-box</button>
<button onclick="setStyleValue('boxSizing', ''); setStyleValue('MozBoxSizing', '');">Remove inline box-sizing</button>
</p>

</body>
</html>
